<template>
    <div class="home_simple">
        <div class="simple_small simple_small_lan">
            <div class="simple_small_title">变价数量</div>
            <div class="simple_small_number">{{ isValue('changePriceNum') }}</div>
            <div class="simple_small_text">截至目前总数据</div>
        </div>
        <div class="simple_small simple_small_lv">
            <div class="simple_small_title">变机制数</div>
            <div class="simple_small_number">{{ isValue('changeMechanismNum') }}</div>
            <div class="simple_small_text">截至目前总数据</div>
        </div>
        <div class="simple_small simple_small_huang">
            <div class="simple_small_title">总盈收金额</div>
            <div class="simple_small_number">{{ isValue('revenue')[0] || 0 }}<span class="simple_small_number_span">{{
                isValue('revenue')[1] }}</span></div>
            <div class="simple_small_text">截至目前总数据</div>
        </div>
        <div class="simple_big simple_big_lan">
            <div class="simple_big_top">
                <div class="top_item">初审送审</div>
                <div class="top_item">初审通过</div>
                <div class="top_item">初审驳回</div>
            </div>
            <div class="simple_big_bottom">
                <div class="bottom_item bottom_item_lv">{{ isValue('firstAuditNum') }}</div>
                <div class="bottom_item bottom_item_lan">{{ isValue('firstPassNum') }}</div>
                <div class="bottom_item bottom_item_hong">{{ isValue('firstRejectNum') }}</div>
            </div>
        </div>
        <div class="simple_big simple_big_lv">
            <div class="simple_big_top">
                <div class="top_item">复审送审</div>
                <div class="top_item">复审通过</div>
                <div class="top_item">复审驳回</div>
            </div>
            <div class="simple_big_bottom">
                <div class="bottom_item bottom_item_lv">{{ isValue('secondAuditNum') }}</div>
                <div class="bottom_item bottom_item_lan">{{ isValue('secondPassNum') }}</div>
                <div class="bottom_item bottom_item_hong">{{ isValue('secondRejectNum') }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { bigNumberTransform } from '@/utils/index'
const props = defineProps(['data'])

const isValue = (key: string) => {
    if (key === 'revenue') {
        return bigNumberTransform(props.data && Number(props.data[key]) || 0, 'arr')
    } else {
        return props.data && props.data[key] || 0
    }
}


</script>

<style lang="scss" scoped>
.home_simple {
    width: 100%;
    height: 229px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .simple_small {
        flex: 0.12;
        min-width: 0;
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .simple_small_title {
            margin-top: 43px;
            font-weight: 500;
            font-size: 18px;
            color: #FFFFFF;
            text-align: center;
        }

        .simple_small_number {
            margin-top: 36px;
            font-weight: 600;
            font-size: 36px;
            color: #FFFFFF;
            text-align: center;

            .simple_small_number_span {
                font-weight: 500;
                font-size: 18px;
            }
        }

        .simple_small_text {
            margin-top: 36px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            text-align: center;
        }
    }

    .simple_small_lan {
        background-image: url(@/assets/images/statistics/icon_landi.png);
    }

    .simple_small_lv {
        background-image: url(@/assets/images/statistics/icon_lvdi.png);
    }

    .simple_small_huang {
        background-image: url(@/assets/images/statistics/icon_huangdi.png);
    }

    .simple_big {
        flex: 0.3;
        min-width: 0;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-flow: column;

        .simple_big_top {
            height: 78px;
            display: flex;

            .top_item {
                flex: 1;
                min-width: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 500;
                font-size: 18px;
                color: #FFFFFF;
            }
        }

        .simple_big_bottom {
            flex: 1;
            min-height: 0;
            display: flex;

            .bottom_item {
                flex: 1;
                min-width: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 600;
                font-size: 36px;
            }

            .bottom_item_lv {
                color: #19D11B;
            }

            .bottom_item_lan {
                color: #0094FF;
            }

            .bottom_item_hong {
                color: #FC2540;
            }
        }
    }

    .simple_big_lan {
        background: #F1F8FF;

        .simple_big_top {
            background: linear-gradient(225deg, #0863FF 0%, #0094FF 100%);
        }
    }

    .simple_big_lv {
        background: #F3FFF5;

        .simple_big_top {
            background: linear-gradient(47deg, #5EDD55 0%, #34DA65 100%);
        }
    }
}
</style>